<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: device-css"/>
</head>
<body>
<div class="wrapper">
    <div class="row">
        <div class="col-sm-4" id="tempCard"></div>
        <div class="col-sm-4" id="pressureCard"></div>
        <div class="col-sm-4" id="rainCard"></div>
    </div>
    <div class="row">
        <div class="col-sm-4" id="speedCard"></div>
        <div class="col-sm-4" id="directionCard"></div>
        <div class="col-sm-4" id="humidityCard"></div>
    </div>
    <div class="chart-view">
        <div class="row search-row" style="">
            <div class="col-sm-12">
                <form id="formId">
                    <button type="button" class="btn btn-primary btn-rounded btn-sm" id="view-btn"
                            onclick="changeView()">
                        <i class="fa fa-list"></i>
                    </button>
                    <input type="text" class="date-input" placeholder="日期" id="date"
                           style="width: 180px; text-align: center; padding-left: 0"
                           name="date" autocomplete="off">
                    <input type="hidden" id="beginTime" name="params[beginTime]">
                    <input type="hidden" id="endTime" name="params[endTime]">
                    <input type="hidden" th:value="${boat.code}" name="boatCode">
                    <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="search()">
                        <i class="fa fa-search"></i>
                    </button>
                    <button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="resetInput()">
                        <i class="fa fa-refresh"></i>
                    </button>
                    <button type="button" class="btn btn-success btn-rounded btn-sm" id="download-btn"
                            onclick="openDownloadDialog()" style="display: none">
                        <i class="fa fa-cloud-download"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" id="chart-row">
                <canvas id="chart"></canvas>
            </div>
            <div class="col-sm-12" id="table-row" style="display: none">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: device-js"/>
<script th:inline="javascript">
    let msgType = 'meteorData';
    let boatCode = [[${boat.code}]];
    let downloadUrl = '/boat/meteorData/export';

    function msgGot(object) {
        if (object.type !== msgType || object.data.boatCode !== boatCode) return;

        // update card
        let data = object.data;
        let label = data.time;
        tempCard.update(data.temp, label)
        pressureCard.update(data.pressure, label)
        speedCard.update(data.windSpeed, label)
        directionCard.update(data.windDirection, label)
        rainCard.update(data.rain, label)
        humidityCard.update(data.humidity, label)
    }


    let chartData = {
        labels: [],
        datasets: [{
            label: '气温',
            data: [],
            tension: 0.2,
            yAxisID: 'yAxis1',
        }, {
            label: '气压',
            data: [],
            tension: 0.2,
            yAxisID: 'yAxis2',
        }, {
            label: '雨量',
            data: [],
            tension: 0.2,
            yAxisID: 'yAxis1',
        }, {
            label: '风速',
            data: [],
            tension: 0.2,
            yAxisID: 'yAxis1',
        }, {
            label: '湿度',
            data: [],
            tension: 0.2,
            yAxisID: 'yAxis1',
        }]
    };
    const config = {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                    }
                },
                yAxis1: {
                    title: {
                        display: true,
                        text: '气温、风速、雨量',
                        font: {
                            size: 16
                        }
                    },
                    grid: {
                        color: 'rgba(255,255,255,.15)',
                        display: true,
                    }
                },
                yAxis2: {
                    min: 0,
                    position: 'right',
                    title: {
                        display: true,
                        text: '气压',
                        font: {
                            size: 16
                        }
                    },
                    grid: {
                        display: false,
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                },
            }
        },
    };

    var prefix = "/boat/meteorData";
    var options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "气象数据",
        showSearch: false,
        showRefresh: false,
        showColumns: false,
        showToggle: false,
        sortName: 'id',
        sortOrder: 'desc',
        sidePagination: 'client',
        onLoadSuccess: function (data) {
            dataList = data // client
            if ($.common.isEmpty(dataList)) dataList = [];
            if (dataList.length === 0) {
                $.modal.msg(currentDate + ' 无数据')
            }
            clearData();
            prepareData();
            initCards();
            initChart();
        },
        columns: [
            {
                field: 'time',
                title: '数据时间'
            },
            {
                field: 'boatCode',
                title: '艇编号'
            },
            {
                field: 'windDirection',
                title: '风向'
            },
            {
                field: 'windSpeed',
                title: '风速'
            },
            {
                field: 'temp',
                title: '气温'
            },
            {
                field: 'humidity',
                title: '湿度'
            },
            {
                field: 'pressure',
                title: '气压'
            },
            {
                field: 'rain',
                title: '雨量'
            },
        ]
    };
    $.table.init(options);

    let xLabels = [];
    let tempValues = [];
    let pressureValues = []
    let speedValues = []
    let directionValues = []
    let rainValues = []
    let humidityValues = []
    let tempCard, pressureCard, speedCard, directionCard, rainCard, humidityCard;

    function prepareData() {
        if (dataList.length === 0) return;
        let from = dataList.length - 11;
        if (from < 0) from = 0;
        for (let i = 0; i < dataList.length; i++) {
            let data = dataList[i]
            if (i >= from && !cardRendered) {
                xLabels.push(data.time)
                tempValues.push(data.temp)
                pressureValues.push(data.pressure)
                speedValues.push(data.windSpeed)
                directionValues.push(data.windDirection)
                rainValues.push(data.rain)
                humidityValues.push(data.humidity)
            }
            chartData.labels.push(data.time.split(' ')[1])
            chartData.datasets[0].data.push(data.temp);
            chartData.datasets[1].data.push(data.pressure);
            chartData.datasets[2].data.push(data.rain);
            chartData.datasets[3].data.push(data.windSpeed);
            chartData.datasets[4].data.push(data.humidity);
        }
    }

    function initCards() {
        if (cardRendered) return
        tempCard = new InfoCard(tempValues, xLabels, {
            parentId: 'tempCard',
            name: '气温',
            unit: '℃',
            min: 0,
            max: 40,
            type: 'line',
            left: 0, // 30
            icon: '/img/icon/sun.webp',
            leftText: {
                fontSize: 12,
                space: 3
            }
        }).init();
        pressureCard = new InfoCard(pressureValues, xLabels, {
            parentId: 'pressureCard',
            name: '气压',
            unit: 'kPa',
            min: 700,
            max: 1100,
            left: 50,
            icon: '/img/icon/pressure.webp',
            type: 'bar',
            axisCount: 7,
            ratio: 1.5, // barWidth 和barSpace的比
            round: true // 是否圆角,
        }).init();
        speedCard = new InfoCard(speedValues, xLabels, {
            parentId: 'speedCard',
            name: '风速',
            unit: 'm/s',
            min: 0,
            max: 12,
            type: 'line',
            fillColor: 'rgba(60, 80, 255, 0.4)',
            left: 0,
            icon: '/img/icon/flag.webp',
            leftText: {
                space: 3
            }
            // left: 50,
        }).init();
        directionCard = new InfoCard(directionValues, xLabels, {
            parentId: 'directionCard',
            name: '风向',
            unit: '°',
            min: 0,
            max: 360,
            type: 'line',
            // fillColor: 'rgba(60, 80, 255, 0.4)',
            left: 0,
            icon: '/img/icon/direction.webp',
            leftText: {
                space: 3
            }
            // left: 50,
        }).init();
        rainCard = new InfoCard(rainValues, xLabels, {
            parentId: 'rainCard',
            name: '雨量',
            unit: 'mm',
            min: 0,
            max: 20,
            type: 'line',
            fillColor: 'rgba(60, 80, 255, 0.4)',
            left: 0,
            icon: '/img/icon/rain.webp',
            leftText: {
                space: 3
            }
            // left: 50,
        }).init();
        humidityCard = new InfoCard(humidityValues, xLabels, {
            parentId: 'humidityCard',
            name: '湿度',
            unit: '%',
            min: 0,
            max: 30,
            left: 0,
            icon: '/img/icon/water.webp',
            type: 'bar',
            axisCount: 7,
            ratio: 1.5, // barWidth 和barSpace的比
            round: true // 是否圆角,
        }).init();
        cardRendered = true;
    }

    function windowResizeCallback() {
        tempCard.render();
        pressureCard.render();
        rainCard.render();
        speedCard.render();
        directionCard.render();
        humidityCard.render();
    }
</script>

</body>
</html>